/*背景画布*/
.game-canvas {
    position: relative;
    margin: auto;
    width: 343px;
    height: 480px;
    background: url(../images/bg.jpg) no-repeat;
    overflow: hidden;
}
/*游戏开始*/
.game-canvas .game-start{
    display: block;
    height: 480px;
}
.game-start .start-head {
    position: absolute;
    top: 100px;
    left: 60px;
    animation: birdMove 1.5s infinite;
}
@keyframes birdMove {
    0% {top: 100px;}
    50% {top: 120px;}
    100% {top: 100px;}
}
.start-head .bird-small {
    display: inline-block;
    width: 40px;
    height: 30px;
    position: absolute;
    right: 0px;
    top: 20px;
    animation: headBirdMove 0.4s infinite;
}
@keyframes headBirdMove {
  0% {background:url(../images/bird0.png) no-repeat; }
  100% {background:url(../images/bird1.png) no-repeat; }
}
/*btns 按钮组*/
.game-start .start-btns {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 250px;
}
.start-btns .game-start-btn {
    display: inline-block;
    width: 85px;
    height: 29px;
    background: url(../images/start.jpg) no-repeat;
    margin-left: 10px;
}
.start-btns .game-submit-btn {
    display: inline-block;
    width: 85px;
    height: 29px;
    margin-left: 10px;
    background: url(../images/submit.jpg) no-repeat;
}

/*移动条*/
.game-canvas .bottom-slider {
  position: absolute;
  left: 0px;
  top: 423px;
  width: 686px;
  height: auto;
  font-size: 0px;
  animation: sliderMove 3s infinite linear;
}
@keyframes sliderMove {
  0% {left: 0;}
  100% {left: -343px;}
}
.bottom-slider img{
  display: inline-block;
}
/*鸟*/
/* 鸟初始样式 */
#bird{
  display: none;
  position: absolute;
  left: 50px;
  top: 200px;
  width: 40px;
  height: 30px;
  background: url(../images/bird0.png) no-repeat;
}
/* 鸟上升样式 */
#bird-up{
  position: absolute;
  left: 50px;
  top: 200px;
  width: 40px;
  height: 30px;
  animation: birdUp 0.3s infinite;
}
@keyframes birdUp {
  0%{background:url(../images/up_bird0.png) no-repeat; }
  100%{background:url(../images/up_bird1.png) no-repeat; }
}
/* 鸟下降样式 */
#bird-down{
  position: absolute;
  left: 50px;
  top: 200px;
  width: 40px;
  height: 30px;
  animation: birdDown 0.3s infinite;
}
@keyframes birdDown {
  0% {background: url(../images/down_bird0.png) no-repeat; }
  100% {background: url(../images/down_bird1.png) no-repeat; }
}
/*管道*/
.conduit-group{
	position: absolute;
  width: 100%;
  height: 480px;
}
.top-conduit{
  width: 62px;
  position: absolute;
  top: 0;
  background: url(../images/up_mod.png);
}
.top-conduit div{
  background: url(../images/up_pipe.png) 0 bottom no-repeat;
}
.bottom-conduit{
  width: 62px;
  position: absolute;
  background: url(../images/down_mod.png);
}
.bottom-conduit div{
  background: url(../images/down_pipe.png) 0 top no-repeat;
}
/*游戏结束*/
.game-canvas .game-over{
  display: none;
}
.game-over .over-bg{
  position: absolute;
  left: 60px;
  top: 100px;
  z-index: 101;
	animation: overBgMove 1s;
}
@keyframes overBgMove{
  0% {top: -100px;}
  100% {top: 100px;}
}
.game-over .over-message{
  width: 269px;
  height: 135px;
  background: url(../images/message.jpg) no-repeat;
  position: absolute;
  left: 40px;
  top: 150px;
	animation: overMessageMove 0.6s ;
  z-index: 101;
}
@keyframes overMessageMove{
  0% {top: 500px;}
  100% {top: 150px;}
}
.game-over .over-message .this-score{
  position: absolute;
  right: 30px;
  top: 35px;
  font-size: 2.5em;
  color: #fff;
}
.game-over .over-message .history-score{
  position: absolute;
  right: 30px;
  top: 85px;
  font-size: 2em;
  color: red;
  font-weight: 100;
}
.game-over .game-restart{
  position: absolute;
  left: 130px;
  top: 300px;
  z-index: 101;
	animation: gameRestartMove 1s;
}
@keyframes gameRestartMove{
	0% {left: -100px;}
	100% {left: 130px;}
}

/*分数*/
.game-scroe {
  position: absolute;
  top: 40px;
  text-align: center;
  width: 100%;
  height: 50px;
  z-index: 20;
}